<template>
  <!-- 投资期 -->
  <div v-loading="loading">
    <div class="fundInvest list-table mb15">
      <div class="main-content">
        <div class="list-content">
          <div><p>{{ $t('实缴') }}</p><span>{{ indicatorsInfo.lpPayment ? moneyFormat(indicatorsInfo.lpPayment / 100000000) : 0 }}<i>亿</i></span></div>
          <div><p>{{ $t('认缴') }}</p><span>{{ indicatorsInfo.subscribedAmount ? moneyFormat(indicatorsInfo.subscribedAmount / 100000000) : 0 }}<i>亿</i></span></div>
        </div>
        <div class="list-content">
          <div><p>{{ $t('已投') }}</p><span>{{ indicatorsInfo.dealPayment ? moneyFormat(indicatorsInfo.dealPayment / 100000000) : 0 }}<i>亿</i></span></div>
          <div><p>{{ $t('剩余可投') }}</p><span>{{ indicatorsInfo.surplusInvest && indicatorsInfo.surplusInvest > 0 ? moneyFormat(indicatorsInfo.surplusInvest / 100000000) : 0 }}<i>亿</i></span></div>
        </div>
      </div>
      <div class="main-content">
        <div class="list-content">
          <div><p>TVPI</p><span>{{ indicatorsInfo.tvpi ? indicatorsInfo.tvpi : '0' }}</span></div>
          <div><p>RVPI</p><span>{{ indicatorsInfo.rvpi ? indicatorsInfo.rvpi : '0' }}</span></div>
          <div><p>DPI</p><span>{{ indicatorsInfo.dpi ? indicatorsInfo.dpi : '0' }}</span></div>
        </div>
      </div>
      <div class="main-content" style="max-width: 320px;">
        <div class="list-content">
          <div><p>Gross IRR</p><span>{{ indicatorsInfo.irr ? indicatorsInfo.irr : '0' }}<i>%</i></span></div>
          <div><p>Net IRR</p><span>{{ indicatorsInfo.netIrr ? indicatorsInfo.netIrr : '0' }}<i>%</i></span></div>
        </div>
      </div>
    </div>
    <el-row :gutter="15">
      <el-col :span="24">
        <div class="list-table mb15">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('基金估值溯源') }}</span>
            <div class="chartBtn">
              <!--              <el-select v-model="year" size="mini" style="width: 120px;" @change="cashflowQuarter">-->
              <!--                <el-option :label="$t('2019-2020')" value="month" />-->
              <!--                <el-option :label="$t('2020-2021')" value="season" />-->
              <!--              </el-select>-->
              <DatePicker v-model="quarter" type="quarter" size="mini" style="width: 100%;" />
            </div>
          </div>
          <div style="height: 40vh;;position: relative;">
            <valuationExcessiveChart v-show="valuationShow" ref="barChart" height="100%" :quarter="quarter" />
            <div v-show="!valuationShow" class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!--      <el-col :span="4">-->
      <!--        <div class="list-table">-->
      <!--          &lt;!&ndash; 进度条 &ndash;&gt;-->
      <!--          <div class="progress-main" style="min-height: 320px;padding: 25px 0">-->
      <!--            <el-row>-->
      <!--              <el-col :span="24" style="text-align: center">-->
      <!--                <circle-progress color="#877efe" style="margin-bottom: 40px" :title="$t('实缴/认缴')" :title-style="{'font-size':'16px','font-weight':'900'}" :percentage="63" icon-name="subscr" />-->
      <!--              </el-col>-->
      <!--              <el-col :span="24" style="text-align: center">-->
      <!--                <circle-progress color="#fabc6a" :title="$t('已投/剩余可投')" :title-style="{'font-size':'16px','font-weight':'900'}" :percentage="63" icon-name="data-analysis" />-->
      <!--              </el-col>-->
      <!--            </el-row>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </el-col>-->
      <el-col :span="24">
        <div class="list-table mb15">
          <div style="height:40vh;position: relative;">
            <barLineChart v-if="barLineChart2.datas.length > 0" ref="barChart" :chart-data="barLineChart2" height="40vh" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-table">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('按行业分类') }}</span>
            <div class="chartBtn">
              <el-select v-model="industry" size="mini" style="width: 100px;" @change="onChange(industry, '1')">
                <el-option :label="$t('投资成本')" value="invest" />
                <el-option :label="$t('最新估值')" value="valuation" />
              </el-select>
            </div>
          </div>
          <div style="height:300px;position: relative;">
            <pieChart v-if="chartData1.datas.length > 0" :chart-data="chartData1" height="100%" @xData="handleTooltipClick($event, '1')" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-table">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('投资类型') }}</span>
            <div class="chartBtn">
              <el-select v-model="investType" size="mini" style="width: 100px;" @change="onChange(investType, '2')">
                <el-option :label="$t('投资成本')" value="invest" />
                <el-option :label="$t('最新估值')" value="valuation" />
              </el-select>
            </div>
          </div>
          <div style="height: 300px;position: relative;">
            <pieChart v-if="chartData2.datas.length > 0" :chart-data="chartData2" height="100%" @xData="handleTooltipClick($event, '2')" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-table">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('按地域分类') }}</span>
            <div class="chartBtn">
              <el-select v-model="area" size="mini" style="width: 100px;" @change="onChange(area, '3')">
                <el-option :label="$t('投资成本')" value="invest" />
                <el-option :label="$t('最新估值')" value="valuation" />
              </el-select>
            </div>
          </div>
          <div style="height: 300px;position: relative;">
            <pieChart v-if="chartData3.datas.length > 0" :chart-data="chartData3" height="100%" @xData="handleTooltipClick($event, '3')" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="list-table mt15">
          <el-form>
            <el-form-item :label="$t('数据截止时间')" prop="endTime">
              <date-picker v-model="queryDealBase.endTime" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('数据截止时间')" @change="getDealList(queryDealBase.name,queryDealBase.value)" />
            </el-form-item>
          </el-form>
          <el-table
            v-loading="dealBaseLoading"
            tooltip-effect="darkTable"
            :data="dealBaseList"
            border
            :row-style="rowStyle"
            @sort-change="dataSort($event)"
          >
            <el-table-column sortable="custom" :label="$t('项目名称')" align="center" prop="dealName" min-width="140" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <router-link
                  v-if="!scope.row.sum"
                  :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId, companyId: scope.row.companyId}}"
                  target="_blank"
                  class="link_a"
                >
                  <span>{{ scope.row.dealName }}</span>
                </router-link>
                <span v-else>{{ scope.row.dealName }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('投资时间')" align="center" prop="firstSchemeTime" min-width="120" />
            <el-table-column sortable="custom" :label="$t('行业')" align="center" prop="industry" min-width="160" show-overflow-tooltip />
            <el-table-column sortable="custom" :label="$t('最新持股比例%')" align="center" prop="holdRate" min-width="130">
              <template slot-scope="scope">
                <span>{{ scope.row.holdRate || scope.row.holdRate === 0 ? scope.row.holdRate.toFixed(2) : scope.row.holdRate }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column :label="$t('目前持股比例%')" align="center" prop="curRate" min-width="120" />-->
            <el-table-column sortable="custom" :label="$t('投资成本') + $t('金额单位')" align="center" prop="investAmount" min-width="100">
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.investAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('累计回款')+$t('金额单位')" align="center" prop="collectionAmount" min-width="100">
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.collectionAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('估值')+$t('金额单位')" align="center" prop="valuationAmount" min-width="100">
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.valuationAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('估值时间')" align="center" prop="valuationTime" min-width="120">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.valuationTime,'{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('MOIC')" align="center" prop="moic" min-width="100" :formatter="calcMoic" />
            <el-table-column sortable="custom" :label="$t('IRR')" align="center" prop="irr" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.irr || scope.row.irr === 0 ? scope.row.irr.toFixed(2) + '%' : scope.row.irr }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column sortable="custom" :label="$t('评级')" align="center" prop="grade" min-width="70">-->
            <!--              <template v-if="scope.row.assetRating" slot-scope="scope">-->
            <!--                <span :class="'grade-'+scope.row.assetRating" />-->
            <!--                &lt;!&ndash; <span class="grade-yellow" /> &ndash;&gt;-->
            <!--                &lt;!&ndash; <span class="grade-green" /> &ndash;&gt;-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column :label="$t('最新情况')" align="center" prop="lastSit" min-width="100">-->
            <!--              <template>-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#f2dc4b;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#f2b34a;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#e9753c;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#67c765;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#e95a3a;vertical-align: middle;margin-top: 2px" />-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
        </div>
      </el-col>
      <!--    <el-col :span="6">-->
      <!--      <div class="list-table">-->
      <!--        <div class="area-header">-->
      <!--          <span class="area-header-sign" />-->
      <!--          <span class="area-header-title">{{ $t('投资情况') }}</span>-->
      <!--        </div>-->
      <!--        <investmentSituation ref="investmentSituation" />-->
      <!--      </div>-->
      <!--    </el-col>-->
      <!--    <el-col :span="12">-->
      <!--      <div class="list-table">-->
      <!--        <div class="area-header">-->
      <!--          <span class="area-header-sign" />-->
      <!--          <span class="area-header-title">{{ $t('基金估值') }}</span>-->
      <!--          <div class="chartBtn">-->
      <!--            <el-select v-model="valuation" size="mini" style="width: 100px;" @change="quarterChange">-->
      <!--              <el-option :label="$t('按月统计')" value="month" />-->
      <!--              <el-option :label="$t('按季统计')" value="season" />-->
      <!--            </el-select>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div style="height: 400px;position: relative;">-->
      <!--          <valuationfund v-if="show" ref="valuationfund" v-loading="valuationChartLoading" :chart-data="valuationChartData" />-->
      <!--          <div v-else class="noneData">-->
      <!--            <div>-->
      <!--              <svg-icon icon-class="none" class-name="none-icon" />-->
      <!--              <p>{{ $t('暂无数据') }}</p>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </el-col>-->
      <!--      <el-col :span="24">-->
      <!--        <div class="list-table">-->
      <!--          <div class="area-header">-->
      <!--            <span class="area-header-sign" />-->
      <!--            <span class="area-header-title">{{ $t('现金流') }}</span>-->
      <!--            <div class="chartBtn">-->
      <!--              <el-select v-model="cashflow" size="mini" style="width: 100px;" @change="cashflowQuarter">-->
      <!--                <el-option :label="$t('按月统计')" value="month" />-->
      <!--                <el-option :label="$t('按季统计')" value="season" />-->
      <!--              </el-select>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <cashflow ref="cashflow" :quarter-or-month="cashflowQuarterOrMonth" />-->
      <!--        </div>-->
      <!--      </el-col>-->
    </el-row>
  </div>
</template>
<script>
// import { pieEchart } from '@/views/fund/components/index'
// import { valuationCharts } from '@/api/fund/valuation/fundValuation'
// import investmentSituation from '@/views/chart/InvestmentSituation'
// import valuationfund from '@/views/chart/valuationfund'
// import cashflow from '@/views/chart/cashflow'
import { getCharts, getDealBaseInfoByFund, getFundBase, getIndicator } from '@/api/fund/fundBase'
import { Decimal } from 'decimal.js'
import pieChart from '@/views/chart/pieChart'
import barLineChart from '@/views/chart/barLineChart.vue'
import valuationExcessiveChart from '@/views/chart/valuationExcessiveChart.vue'
import { compare } from '@/utils'

export default {
  components: {
    pieChart,
    barLineChart,
    valuationExcessiveChart
    // pieEchart,
    // investmentSituation,
    // valuationfund,
    // cashflow
  },
   data() {
    return {
      // 项目现金流 true: 按月统计 false: 按季度统计
      cashflowQuarterOrMonth: false,
      // 基金情况文字介绍
      textShowArray: [this.$t('未缴金额：当前基金LP总认缴-当前基金LP总实缴'), this.$t('在缴金额：当前基金LP总实缴'), this.$t('可投金额：当前基金LP总实缴 – 当前基金作为投资主体的实际投资金额')],
      valuationChartLoading: false,
      // 首页指标信息
      indicatorsInfo: {
        lpPayment: 0,
        subscribedAmount: 0,
        surplusInvest: 0,
        tvpi: 0,
        dpi: 0,
        irr: 0,
        netIrr: 0,
        rvpi: 0
      },
      valuationChartData: {},
      investType: 'invest',
      industry: 'invest',
      area: 'invest',
      show: true,
      quarter: [],
      loading: true,
      dealBaseLoading: true,
      dealBaseList: [],
      actualPercentage: 0,
      investPercentage: 0,
      chartName: undefined,
      queryDealBase: {
        name: undefined,
        value: undefined,
        order: undefined,
        prop: undefined,
        fundId: undefined,
        endTime: undefined
      },
      fundIrr: 0,
      chartData1: {
        valueFormatter: true,
        datas: []
      },
      chartData2: {
        valueFormatter: true,
        datas: []
      },
      chartData3: {
        valueFormatter: true,
        datas: []
      },
      barLineChart2: {
        valueFormatter: true,
        legend: true,
        legendLeft: 'center',
        yAxisName1: this.$t('金额单位'),
        yAxis2: true,
        yAxisName2: this.$t('金额单位'),
        datas: []
      },
      barLineChart1: {
        valueFormatter: true,
        legend: false,
        yAxisName1: this.$t('金额单位'),
        datas: []
      },
      valuationShow: true
    }
  },
  mounted() {
    // this.quarterChange('season')
    // this.cashflowQuarter('season')
    getFundBase(this.$route.query.id).then(res => {
      this.fundIrr = res.data.latestIrr ? res.data.latestIrr : 0
    })
    this.init()
  },
  methods: {
    handleTooltipClick(params, key) {
      // console.log(params, key)
      var type = ''
      if (key === '1') {
        type = 'industry'
      } else if (key === '2') {
        type = 'investType'
      } else if (key === '3') {
        type = 'area'
      }
      if (this.chartName !== params.name) {
        this.getDealList(type, params.nodeValue)
        this.chartName = params.name
      } else {
        this.getDealList(null, null)
        this.chartName = undefined
      }
    },
    onChange(type, key, is) {
      var fundId = this.$route.query.id || 'all'
      if (key === '1') {
        getCharts(fundId, 'industry', { type: type }).then(res => {
          this.chartData1.datas = res.data || []
          this.chartData1.radius = ['30%', '45%']
          this.chartData1.center = ['50%', '45%']
          this.chartData1.legend = true
          this.chartData1.datas.forEach(item => {
            item.name = item.nodeName
          })
        })
      } else if (key === '2') {
        getCharts(fundId, 'investType', { type: type }).then(res => {
          this.chartData2.datas = res.data || []
          this.chartData2.radius = ['30%', '45%']
          this.chartData2.center = ['50%', '45%']
          this.chartData2.legend = true
          this.chartData2.datas.forEach(item => {
            item.name = item.nodeName
          })
        })
      } else if (key === '3') {
        getCharts(fundId, 'area', { type: type }).then(res => {
          this.chartData3.datas = res.data || []
          this.chartData3.radius = ['30%', '45%']
          this.chartData3.center = ['50%', '45%']
          this.chartData3.legend = true
          this.chartData3.datas.forEach(item => {
            item.name = item.nodeName
          })
        })
      }
      if (!is) {
        this.getDealList(null, null)
      }
      this.chartName = undefined
    },
    changeFund(is) {
      this.onChange(this.industry, '1', is)
      this.onChange(this.investType, '2', is)
      this.onChange(this.area, '3', is)
    },
    init() {
      this.loading = true
      getIndicator(this.$route.query.id).then(res => {
        if (res.data) {
          this.indicatorsInfo = res.data
          this.actualPercentage = this.indicatorsInfo.lpPayment && this.indicatorsInfo.subscribedAmount ? (this.indicatorsInfo.lpPayment / this.indicatorsInfo.subscribedAmount) * 100 : 0
          this.investPercentage = this.indicatorsInfo.surplusInvest > 0 && this.indicatorsInfo.totalAmount && this.indicatorsInfo.totalAmount > 0 ? ((this.indicatorsInfo.surplusInvest / this.indicatorsInfo.totalAmount) * 100) : 0
          // console.log(this.actualPercentage, this.investPercentage, this.indicatorsInfo)
        }
        this.loading = false
      })
      this.getDealList(null, null)
      this.changeFund(true)
      // this.onChangeQuarter()

      getCharts(this.$route.query.id, 'valuationChange', {}).then(res => {
        if (res.data && res.data.length > 0) {
          var _data = res.data[0].data
          var xLabel = []
          var datas = []
          for (var key in _data) { xLabel.push({ name: key }) }
          this.barLineChart2.xLabel = compare(xLabel, 'name').map(v => v.name)
          this.barLineChart2.xLabel.forEach(v => {
            var obj = { data: _data[v] }
            datas.push(obj)
          })
          var series = datas[0].data.map(v => { return { data: [], name: v.nodeName, type: v.nodeName === '基金估值' ? 'line' : 'bar', stack: v.nodeName === '基金估值' ? '' : '1' } })
          for (let j = 0; j < series.length; j++) {
            series[j].data = []
            for (let i = 0; i < datas.length; i++) {
              series[j].data.push(datas[i].data[j].value)
            }
          }
          this.barLineChart2.datas = series
        }
      })
    },
    onChangeQuarter(val) {
      var quarter = val || []
      getCharts(this.$route.query.id, 'trace', { startDate: quarter[0], endDate: quarter[1] }).then(res => {
        var rows = res.data || []
        if (rows.length > 0) {
          this.barLineChart1.xLabel = rows.map(el => el.nodeName)
          this.barLineChart1.legend = false
          this.barLineChart1.seriesLabelShow = true
          this.barLineChart1.datas = [
            {
              type: 'bar',
              name: '',
              data: rows.map(ele => { return { value: ele.value, name: this.$t(ele.nodeName), sort: ele.sort, count: ele.count } })
            }
          ]
        } else {
          this.barLineChart1.datas = []
        }
      })
    },
    rowStyle({ row }) {
      if (row.sum) {
        if (row.dealName === '总计') {
          return { 'background-color': '#F3F6FB', 'font-weight': 'bolder' }
        } else {
          return { 'font-weight': 'bolder' }
        }
      } else {
        return {}
      }
    },
    getSummaries(rows) {
      var investAmount = new Decimal(0)
      var collectAmount = new Decimal(0)
      var valutionAmount = new Decimal(0)
      var moic = 0
      console.log(this.fundIrr, '基金IRR')

      var irr = this.fundIrr
      rows.forEach(item => {
        investAmount = investAmount.add(new Decimal(Number(item.investAmount)))
        collectAmount = collectAmount.add(new Decimal(Number(item.collectionAmount)))
        valutionAmount = valutionAmount.add(new Decimal(Number(item.valuationAmount)))
      })

      console.log(investAmount, collectAmount, valutionAmount)

      var row = {
        dealName: '合计',
        investAmount: investAmount.toNumber(),
        collectionAmount: collectAmount.toNumber(),
        valuationAmount: valutionAmount.toNumber()
      }

      moic = this.calcMoic(row)
      row.moic = moic
      row.irr = irr
      return row
    },
    calcMoic(row) {
      if ((row.investAmount || row.investAmount === 0) && (row.collectionAmount || row.collectionAmount === 0) && (row.investAmount)) {
        var valution = new Decimal(row.valuationAmount)
        valution = new Decimal(valution.add(row.collectionAmount))
        var num = valution.div(row.investAmount)
        return num.toFixed(2)
      }
      return ''
    },
    getDealList(type, typeValue) {
      this.queryDealBase.name = type
      this.queryDealBase.value = typeValue
      this.queryDealBase.fundId = this.$route.query.id || 'all'
      this.dealBaseLoading = true
      getDealBaseInfoByFund(this.queryDealBase).then(res => {
        this.dealBaseList = res.rows || []
        this.dealBaseLoading = false
      })
    },
    // quarterChange(val) {
    //   let flag = false
    //   if (val === 'month') {
    //     flag = true
    //   }
    //   this.valuationChartLoading = true
    //   const params = {
    //     fundId: this.$route.query.id,
    //     quarterOrMonth: flag
    //   }
    //   valuationCharts(params).then(response => {
    //     if (response.data !== null) {
    //       this.valuationChartData = response.data
    //       this.show = true
    //     } else {
    //       this.show = false
    //     }
    //     this.valuationChartLoading = false
    //   })
    // },
    formatDashboard() {
      var amount = this.indicatorsInfo.lpPayment ? this.indicatorsInfo.lpPayment / 100000000 : 0
      return `<span style="display: inline-block;margin-right: 2px">${this.moneyFormat(amount)}</span><span style="font-size: 12px">亿</span>`
    },
    formatCircle() {
      var amount = this.indicatorsInfo.surplusInvest ? this.indicatorsInfo.surplusInvest / 100000000 : 0
      if (amount <= 0) {
        amount = 0
      }
      return `<span style="display: inline-block;margin-right: 2px">${this.moneyFormat(amount)}</span><span style="font-size: 12px">亿</span>`
    },
    cashflowQuarter(val) {
      if (val === 'month') {
        this.cashflowQuarterOrMonth = true
      } else {
        this.cashflowQuarterOrMonth = false
      }
    },
    // 排序
    dataSort(column) {
      if (column.order && ['ascending', 'descending'].includes(column.order)) {
        this.queryDealBase.prop = column.prop
        this.queryDealBase.order = column.order === 'ascending' ? 'asc' : 'desc'
      } else {
        this.queryDealBase.prop = undefined
        this.queryDealBase.order = undefined
      }
      this.getDealList(this.queryDealBase.name, this.queryDealBase.value)
    }
  }
}
</script>

<style scoped lang="scss">
.home{
  margin: 0 auto;
  width: calc(100% - 40px);
}
.area-main {
  .list-content {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    padding: 22px 0 0;
    box-shadow: 0 3px 12px 2px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 3px 12px 2px rgba(0,0,0,.3);
    -webkit-transition: .3s;
    transition: .3s;
    .content {
      width: calc(100% - 40px);
      height: 100%;
      margin: 0 auto;
      .el-row{
        height: 100%;
      }
      .main-content{
        margin-bottom: 20px;
        text-align: center;
        .icon {
          width: 27px;
          height: 27px;
          border-radius: 50%;
          display: block;
          vertical-align: middle;
          margin: 0 auto;
          margin-bottom: 10px;
        }
        .main {
          display: block;
          vertical-align: middle;
          .main-title {
            font-size: 16px;
            color: #fff;
            font-weight: 900;
            margin-bottom: 4px;
          }
          .main-text{
            font-size: 14px;
            font-weight: bold;
            margin-top: 2px;
            color: #fff;
          }
          .unit{
            font-size: 12px;
          }
        }
      }
    }
  }
  .area-list {
    .col-list {
      margin-bottom: 10px;
    }
    span{
      font-size: 12px;
    }
    .title-text::before {
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
    .text{
      text-align: right;
    }
  }
  .progress-main{
    margin-top: 20px;
  }
}
.blue {
  .icon {
    background-color: #57abeb;
  }
  background-color: #80c6fa;
}
.red {
  background-color: #ed9370;
  .icon{
    background-color: #e17e54;
  }
}
.purple {
  background-color: #8377f7;
  .icon{
    background-color: #7162f3;
  }
}
.icon{
  .icon-money {
    display: block;
    width: 20px;
    height: 27px;
    background: url(../../../../assets/image/money.png) no-repeat center center / 15px 15px;
    margin: 0 auto;
  }
  .icon-irr {
    display: block;
    width: 20px;
    height: 27px;
    background: url(../../../../assets/image/netIrr.png) no-repeat center center / 15px 15px;
    margin: 0 auto;
  }
  .icon-invest {
    display: block;
    width: 20px;
    height: 27px;
    background: url(../../../../assets/image/investMoney.png) no-repeat center center / 15px 15px;
    margin: 0 auto;
  }
}

/deep/.el-icon-subscr {
  background: url('../../../../assets/image/subscr.png') center center no-repeat;
  background-size: 100%;
  height: 25px;
  width: 25px;
}

/deep/.el-icon-invest {
  background: url('../../../../assets/image/invest.png') center center no-repeat;
  background-size: 100%;
  height: 25px;
  width: 25px;
}

/deep/.el-icon-subscr:before {
  content: "11";
  visibility: hidden;
}
/deep/.el-icon-invest:before {
  content: "11";
  visibility: hidden;
}

</style>
